<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Responsive movie app UI</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="window-margin">
	<div class="window">

		<aside class="sidebar">
			<div class="top-bar">
				<p class="logo">REPLEX</p>
			</div>

			<div class="search-box">
				<input type="text" placeholder="Search..."/>
				<p class="fa fa-search"></p>
			</div>

			<menu class="menu">
				<p class="menu-name">Movie trailers</p>
				<ul>
					<li class="active">
						<a href="#">Action / Adventure</a>
						<ul>
							<li><a href="#">Latest</a></li>
							<li class="active"><a href="#">Popular</a></li>
							<li><a href="#">Coming soon</a></li>
							<li><a href="#">Staff picks</a></li>
						</ul>
					</li>
					<li><a href="#">Animation</a></li>
					<li><a href="#">Comedy</a></li>
					<li><a href="#">Documentaries</a></li>
					<li><a href="#">Drama</a></li>
					<li><a href="#">Horror</a></li>
					<li><a href="#">Sci-Fi  / Fantasy</a></li>
					<li><a href="#">List A-Z</a></li>
				</ul>

				<div class="separator"></div>

				<ul class="no-bullets">
					<li><a href="#">Latest news</a></li>
					<li><a href="#">Critic reviews</a></li>
					<li><a href="#">Box office</a></li>
					<li><a href="#">Top 250</a></li>
				</ul>

				<div class="separator"></div>
			</menu>
		</aside>


		<div class="main" role="main">

			<div class="top-bar">

				<div class="profile-box">
					<div class="circle"></div>
					<span class="arrow fa fa-angle-down"></span>
				</div>

				<ul class="top-menu">
					<li class="menu-icon trigger-sidebar-toggle">
						<div class="line"></div>
						<div class="line"></div>
						<div class="line"></div>
					</li>
					<li><a href="#">Headlines</a></li>
					<li><a href="#">Articles</a></li>
					<li class="active"><a href="#">Movies & Films</a></li>
					<li><a href="#">Television</a></li>
					<li><a href="#">Music</a></li>
					<li><a href="#">Celebrities</a></li>
				</ul>

			</div> <!-- top bar -->


			<div class="featured-movie">
				<img class="cover" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/backdrop_ggwxvq_1.jpg" alt="" class="cover" />
				<p class="corner-title">Staff pick</p>

				<div class="bottom-bar">
					<div class="title-container">
						<span class="fa fa-play-circle"></span>
						<b>Non-stop</b> Trailer #1
					</div>

					<div class="right">
						<div class="stars">
							<span class="fa fa-star"></span>
							<span class="fa fa-star"></span>
							<span class="fa fa-star"></span>
							<span class="fa fa-star-half-o"></span>
							<span class="fa fa-star-o"></span>
						</div>
						<div class="share">
							<icon class="fa fa-share-square"></icon> Share
						</div>
					</div> <!-- right -->
				</div> <!-- bottom bar -->
			</div> <!-- featured -->


			<div class="movie-list">
				<div class="title-bar">
					<div class="left">
						<p class="bold">Popular Trailers</p>
						<p class="grey">Action / Adventure</p>
					</div> <!-- left -->
					<div class="right">
						<a class="blue" href="#">Rating <i class="fa fa-angle-down"></i></a>
						<a href="#">Newest</a>
						<a href="#">Oldest</a>
					</div> <!-- right -->
				</div> <!-- title-bar -->

				<ul class="list">
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140412_oavbye_1.png" alt="" class="cover" />
						<p class="title">Sin City: A Dame To Kill For</p>
						<p class="genre">Action, Crime</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140329_aawn02_1.png" alt="" class="cover" />
						<p class="title">Transcendence</p>
						<p class="genre">Action, Drama</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140239_kyg9i7_1.png" alt="" class="cover" />
						<p class="title">Need For Speed</p>
						<p class="genre">Action, Crime</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140052_dq4dyx_1.png" alt="" class="cover" />
						<p class="title">The Amazing Spiderman</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140104_tdgzka_1.png" alt="" class="cover" />
						<p class="title">Pompeii</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140248_fmufrz_1.png" alt="" class="cover" />
						<p class="title">Divergent</p>
						<p class="genre">Action, Sci-Fi</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140401_aewzsy_1.png" alt="" class="cover" />
						<p class="title">Guardians of the Galaxy</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140339_wck2gw_1.png" alt="" class="cover" />
						<p class="title">X-Men: Days of Fury</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140311_rj1det_1.png" alt="" class="cover" />
						<p class="title">Captain America: The Winter Soilder</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140248_fmufrz_1.png" alt="" class="cover" />
						<p class="title">Divergent</p>
						<p class="genre">Action, Sci-Fi</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140132_bcnfqk_1.png" alt="" class="cover" />
						<p class="title">RoboCop (2014)</p>
						<p class="genre">Action, Crime</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140329_aawn02_1.png" alt="" class="cover" />
						<p class="title">Transcendence</p>
						<p class="genre">Action, Drama</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140239_kyg9i7_1.png" alt="" class="cover" />
						<p class="title">Need For Speed</p>
						<p class="genre">Action, Crime</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140104_tdgzka_1.png" alt="" class="cover" />
						<p class="title">Pompeii</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140412_oavbye_1.png" alt="" class="cover" />
						<p class="title">Sin City: A Dame To Kill For</p>
						<p class="genre">Action, Crime</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140339_wck2gw_1.png" alt="" class="cover" />
						<p class="title">X-Men: Days of Fury</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140052_dq4dyx_1.png" alt="" class="cover" />
						<p class="title">The Amazing Spiderman</p>
						<p class="genre">Action, Adventure</p>
					</li>
					<li>
						<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140248_fmufrz_1.png" alt="" class="cover" />
						<p class="title">Divergent</p>
						<p class="genre">Action, Sci-Fi</p>
					</li>
				</ul>

				<a href="#" class="load-more">Show more movies <span class="fa fa-plus"></span></a>

			</div> <!-- movie list -->


		</div> <!-- main -->

	</div> <!-- window -->
</div> <!-- window margin -->
<!-- partial -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
